<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">登录地区占比</div>
    </div>
    <div v-if="tableDate&&tableDate.length>0" id="main" ref="echartsRef" class="echarts_div" />
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { register } from '@/api/superManage/systemMonitoring/superLarge'
import Big from 'big.js' // big.js解决精度丢失问题
import { mapGetters } from 'vuex'
export default {
  name: 'LocationDistribution',
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      msg: 'fafa',
      tableDate: ['1'],
      myChart: undefined,
      timer: undefined
    }
  },
  mounted() {
    this.resetScale() // 重置缩放
    // this.drawLine()
    this.getList()
    this.timer = setInterval(() => {
      this.getList()
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  beforeDestroy() {
    // 页面关闭清除定时器
    clearInterval(this.timer)
  },
  methods: {

    resetScale() {
      const scaleX = this.$refs.echartsRef.clientWidth / 797
      const scaleY = this.$refs.echartsRef.clientHeight / 250
      this.$refs.echartsRef.style.transform = 'scale(' + Math.min(scaleX, scaleY) + ')'
      this.$refs.echartsRef.style.transformOrigin = 'left'
      this.$refs.echartsRef.style.marginRight = -(797 * (1 - Math.min(scaleX, scaleY))) + 'px'
    },
    getList() {
      // clearInterval(this.timer)
      register().then(res => {
        this.tableDate = res.data

        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      if (this.myChart) {
        this.$echarts.init(document.getElementById('main')).dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('main'))
      const arr = []
      const nameArray = []
      this.tableDate.forEach(item => {
        arr.push({
          value: new Big(item.blz).times(100).toString(),
          name: item.location + ',' + item.times,
          name1: item.location
        })
        nameArray.push(item.location)
      })
      this.myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        // 右边信息面板
        legend: {
          orient: 'vertical',
          right: '4%',
          top: 'middle',
          itemHeight: 14,
          itemWidth: 27,
          itemGap: 30,
          formatter: name => {
            let params1 = name.split(',')[0]
            if (params1.length > 7) {
              params1 = params1.substr(0, 6) + '...'
            }
            const params2 = name.split(',')[1]
            const arr = [
              '{a|' + params1 + '}',
              '{b|' + params2 + '}'
            ]
            return arr.join('')
          },
          textStyle: {
            rich: {
              a: {
                color: '#000000',
                fontSize: 16,
                padding: [0, 20],
                width: 50
              },
              b: {
                align: 'right',
                fontSize: 18,
                width: 80
              }
            }
          }
        },
        // 设置饼状图每个颜色块的颜色
        color: ['#6CF72D', '#FFCC00', '#FF8385', '#5AD1FF', '#9C74FF'],
        // 牵引线
        series: [
          {
            type: 'pie',
            radius: ['44%', '70%'],
            center: ['35%', '45%'],
            avoidLabelOverlap: true,
            silent: true,
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 3
            },
            label: {
              padding: [0, 0],
              margin: 10,
              formatter: function(e) {
                const {
                  data: { name1, value }
                } = e
                if (name1.length > 5) {
                  return `{a|${name1.slice(0, 4)}...,}{a|${value}%}\n\n`
                } else {
                  return `{a|${name1},}{a|${value}%}\n\n`
                }
              },
              rich: {
                a: { fontSize: 14, color: '#000000' }
              }
            },
            // emphasis: {
            //   label: {
            //     show: true,
            //     fontSize: '40',
            //     fontWeight: 'bold'
            //   }
            // },
            labelLine: {
              show: true, // 数据标签引导线
              // 牵引线长度
              length: 40,
              length2: 80,
              lineStyle: {
                width: 1,
                type: 'solid',
                color: '#D8D8D8'
              }
            },
            data: arr
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: 100%;
}

.emergency_top {
  display: flex;
  justify-content: space-between;
  height: 50px;

  .emergency_title {
    font-weight: bold;
    font-size: 24px;
    line-height: 34px;
    letter-spacing: -0.21px;
    color: #333333;
    padding-top: 16px;
    padding-left: 20px;
  }
}
.echarts_div{
  height: calc(100% - 50px);
  padding: 20px 0 20px 10px;
}

</style>
